<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <div class="index_info">
        <span class="index_info2">患者信息</span
        ><span class="index_complicate" v-if="siderlist.infoCompletePercentage !== 0"
          >已完成{{ siderlist.infoCompletePercentage }}%</span
        >
        <span class="index_complicate" v-if="siderlist.infoCompletePercentage == 0">暂无患者信息，请及时填写</span>
      </div>

      <a-layout style="position: relative">
        <a-layout-sider width="220px">
          <div style="width: 210px; background-color: #eef0f6; border-radius: 16px">
            <img :src="src" alt="" />
            <div style="margin: 5px; background-color: #ffffff; border-radius: 8px"></div>
            <a-tag color="#f50" style="position: absolute; left: 114px; top: 108px" v-if="siderlist.groupName">
              {{ siderlist.groupName }}
            </a-tag>

            <div
              style="
                width: 190px;
                height: 70px;
                background-color: #ffffff;
                border-radius: 8px;
                margin: 29px 0px 14px 9px;
                position: relative;
                margin-bottom: 14px !important;
              "
            >
              <img
                src="../../assets/consumption.png"
                style="width: 38px; height: 38px; margin: 15px 0 15px 2px"
                alt=""
              />
              <p class="sider_text consumption1">
                本月消费：{{ siderlist.consumptionThisMonth }}<span v-if="siderlist.consumptionThisMonth">元</span>
              </p>
              <p class="sider_text consumption2">
                总消费：{{ siderlist.consumptionTotal }}<span v-if="siderlist.consumptionTotal">元</span>
              </p>
            </div>

            <div
              style="
                width: 190px;
                height: 70px;
                background-color: #ffffff;
                border-radius: 8px;
                margin: 0px 0px 14px 9px;
                position: relative;
                margin-bottom: 14px !important;
              "
            >
              <img src="../../assets/plan.png" style="width: 38px; height: 38px; margin: 15px 0 15px 2px" alt="" />
              <p class="sider_text consumption1">
                已打卡：{{ siderlist.signinDay }}天/&nbsp;{{ siderlist.signinCount }}次
              </p>
              <p class="sider_text consumption2">漏打卡：{{ siderlist.noSigninCount }}次</p>
            </div>

            <div
              style="
                width: 190px;
                height: 70px;
                background-color: #ffffff;
                border-radius: 8px;
                margin: 0px 0px 14px 9px;
                position: relative;
                margin-bottom: 14px !important;
              "
            >
              <img
                src="../../assets/appointment.png"
                style="width: 38px; height: 38px; margin: 15px 0 15px 2px"
                alt=""
              />
              <p class="sider_text consumption1">复诊状态：{{ siderlist.flupStatus }}</p>
              <p class="sider_text consumption2">{{ date1 }}：{{ siderlist.flupDate }}</p>
            </div>

            <div
              style="
                width: 190px;
                height: 70px;
                background-color: #ffffff;
                border-radius: 8px;
                margin: 0px 0px 24px 9px;
                position: relative;
                margin-bottom: 24px !important;
              "
            >
              <img src="../../assets/service.png" style="width: 38px; height: 38px; margin: 15px 0 15px 2px" alt="" />
              <p class="sider_text consumption1">服务：{{ siderlist.serviceName }}</p>
              <p class="sider_text consumption2">终止日期：{{ siderlist.serviceEndTime }}</p>
            </div>
            <div style="width: 190px; height: 1px; background-color: rgb(238, 240, 246)"></div>
          </div>
        </a-layout-sider>
        <a-layout-content style="margin-right: 20px">
          <div class="layout_content">
            <a-row>
              <a-col :span="12"
                ><span class="text_color">患&nbsp;者&nbsp;姓&nbsp;名</span> {{ list.patientName }}</a-col
              >
              <a-col :span="12"
                ><span class="text_color"> 性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span
                >{{ list.patientSexText }}</a-col
              >
            </a-row>
            <a-row>
              <a-col :span="12"
                ><span class="text_color">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</span
                >{{ list.age }}</a-col
              >
              <a-col :span="12"
                ><span class="text_color">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</span
                >{{ list.occupationText }}</a-col
              >
            </a-row>
            <a-row>
              <a-col :span="12"
                ><span class="text_color">手&nbsp;机&nbsp;号&nbsp;码</span>{{ list.patientMobile }}</a-col
              >
              <a-col :span="12"><span class="text_color"> 身份证号</span>{{ list.patientIdCard }} </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"><span class="text_color">紧急联系人</span>{{ list.familyName }}</a-col>
              <a-col :span="12"> <span class="text_color">手机号码</span>{{ list.familyMobile }} </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"><span class="text_color">糖尿病类型</span>{{ list.patientDiabetisTypeText }}</a-col>
              <a-col :span="12"> <span class="text_color">确诊日期</span>{{ list.patientConfirmedDate }} </a-col>
            </a-row>
            <a-row>
              <a-col :span="20">
                <div style="position: relative">
                  <span class="text_color">
                    主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;诉
                  </span>
                  <div style="position: absolute; height: 40px; left: 91px; top: -1px">{{ list.patientDesc }}</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-layout-content>
        <a-layout-content>
          <div style="width: 410px">
            <div style="background-color: #ffffff; border-radius: 16px; padding: 20px 0">
              <div class="index_info1">今日血糖</div>
              <div id="myChart" :style="{ width: '380px', height: '186px' }"></div>
            </div>
            <div
              style="background-color: #ffffff; border-radius: 16px; padding: 20px 0; height: 241.6px; margin-top: 20px"
            >
              <div class="index_info1">今日饮食</div>
              <img class="index_info1_img" src="../../assets/breakfast.png" alt="" />
              <img class="index_info1_img" src="../../assets/noon.png" alt="" />
              <img class="index_info1_img" src="../../assets/night.png" alt="" />
              <p>
                <span class="index_info1_text">早餐</span><span class="index_info1_text">午餐</span
                ><span class="index_info1_text">晚餐</span>
              </p>
              <p>
                <span class="index_info1_text1" v-if="siderlist.breakfast == true">已打卡</span
                ><span class="index_info1_text2" v-if="siderlist.breakfast == false">未打卡</span
                ><span class="index_info1_text1" v-if="siderlist.lunch == true">已打卡</span
                ><span class="index_info1_text2" v-if="siderlist.lunch == false">未打卡</span>
                <span class="index_info1_text1" v-if="siderlist.dinner == true">已打卡</span
                ><span class="index_info1_text2" v-if="siderlist.dinner == false">未打卡</span>
              </p>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
      <a-layout-footer>
        <div class="index_info1" style="margin-top: 20px"><span>控制目标</span></div>
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :scroll="{ x: 1300 }"
          :rowKey="
            (record, index) => {
              return index
            }
          "
        >
          <a slot="action" slot-scope="text" href="javascript:;">action</a>
        </a-table>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts'

const columns = [
  {
    title: '控制目标',
    dataIndex: 'targetName',
    scopedSlots: { customRender: 'name' },
    width: 100,

    fixed: 'left',
  },
  {
    title: 'BMI',
    dataIndex: 'bmi',
    width: 80,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.bmi > data[0].bmi) {
    //     return { style: { color: 'red' } }
    //   } else if (val.bmi < data[0].bmi) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '体重(KG)',
    dataIndex: 'weight',
    width: 80,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.weight > data[0].weight) {
    //     return { style: { color: 'red' } }
    //   } else if (val.weight < data[0].weight) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '腰围(cm)',
    dataIndex: 'waist',
    width: 80,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.waist > data[0].waist) {
    //     return { style: { color: 'red' } }
    //   } else if (val.waist < data[0].waist) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '糖化血红蛋白(%)',
    dataIndex: 'hbA1c',
    width: 120,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.hbA1c > data[0].hbA1c) {
    //     return { style: { color: 'red' } }
    //   } else if (val.hbA1c < data[0].hbA1c) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '空腹血糖(mmol/L)',
    dataIndex: 'fbg',
    width: 110,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.fbg > data[0].fbg) {
    //     return { style: { color: 'red' } }
    //   } else if (val.fbg < data[0].fbg) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '餐后血糖(mmol/L)',
    dataIndex: 'pbg',
    width: 120,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.pbg > data[0].pbg) {
    //     return { style: { color: 'red' } }
    //   } else if (val.pbg < data[0].pbg) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '收缩压(mmHg)',
    dataIndex: 'pressureHigh',
    width: 120,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.pressureHigh > data[0].pressureHigh) {
    //     return { style: { color: 'red' } }
    //   } else if (val.pressureHigh < data[0].pressureHigh) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '舒张压(mmHg)',
    dataIndex: 'pressureLow',
    width: 120,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.pressureLow > data[0].pressureLow) {
    //     return { style: { color: 'red' } }
    //   } else if (val.pressureLow < data[0].pressureLow) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '心率/脉搏(次/分钟)',
    dataIndex: 'heartRate',
    width: 110,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.heartRate > data[0].heartRate) {
    //     return { style: { color: 'red' } }
    //   } else if (val.heartRate < data[0].heartRate) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '总胆固醇(mmol/L)',
    dataIndex: 'tc',
    width: 100,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.tc > data[0].tc) {
    //     return { style: { color: 'red' } }
    //   } else if (val.tc < data[0].tc) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '甘油三酯(mmol/L)',
    dataIndex: 'tg',
    width: 100,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.tg > data[0].tg) {
    //     return { style: { color: 'red' } }
    //   } else if (val.tg < data[0].tg) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '低密度脂蛋白胆固醇(mmol/L)',
    dataIndex: 'ldl',
    width: 120,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.ldl > data[0].ldl) {
    //     return { style: { color: 'red' } }
    //   } else if (val.ldl < data[0].ldl) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '高密度脂蛋白胆固醇(mmol/L)',
    dataIndex: 'hdl',
    width: 120,
    // customCell: (val, record, rowIndex) => {
    //   console.log('val', val)
    //   console.log(data[0])
    //   if (val.hdl > data[0].hdl) {
    //     return { style: { color: 'red' } }
    //   } else if (val.hdl < data[0].hdl) {
    //     return { style: { color: 'blue' } }
    //   }
    // },
  },
  {
    title: '用药情况  ',
    dataIndex: 'drug',
    width: 120,
  },
]

const data = []
export default {
  name: 'index',
  components: {},
  data() {
    return {
      list: [],
      siderlist: [],
      data,
      date1: '预约日期',
      linetime: [],
      linedata: [],
      columns,
      src: 'https://images-gz.oss-cn-guangzhou.aliyuncs.com/upload/head_1641873225158.png',
      url: {
        getBasicInfo: '100/12/1001202',
        getSiderInfo: '108/01/1080105',
        getTargetList: '107/02/1070205',
      },
    }
  },
  methods: {
    getBasicInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
      }
      postAction(this.url.getBasicInfo, params).then((res) => {
        if (res.success) {
          this.list = res.result[0]
          if (res.result[0].avatar && res.result[0].avatar !== null) {
            this.src = res.result[0].avatar
          }
        }
      })
    },
    getTargetList() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
      }
      getAction(this.url.getTargetList, params).then((res) => {
        if (res.success) {
          this.data = []
          if (res.result.target) {
            this.data.push({
              targetName: '目标值',
              drug: res.result.target.drug ? res.result.target.drug : '/',
              fbg: res.result.target.fbg ? res.result.target.fbg : '/',
              hbA1c: res.result.target.hbA1c ? res.result.target.hbA1c : '/',
              hdl: res.result.target.hdl ? res.result.target.hdl : '/',
              heartRate: res.result.target.heartRate ? res.result.target.heartRate : '/',
              ldl: res.result.target.ldl ? res.result.target.ldl : '/',
              pbg: res.result.target.pbg ? res.result.target.pbg : '/',
              pressureHigh: res.result.target.pressureHigh ? res.result.target.pressureHigh : '/',
              pressureLow: res.result.target.pressureLow ? res.result.target.pressureLow : '/',
              tc: res.result.target.tc ? res.result.target.tc : '/',
              tg: res.result.target.tg ? res.result.target.tg : '/',
              waist: res.result.target.waistLine ? res.result.target.waistLine : '/',
              bmi: res.result.target.bmi ? res.result.target.bmi : '/',
              weight: res.result.target.weight ? res.result.target.weight : '/',
            })
          }
          if (res.result.valueThisWeek) {
            this.data.push({
              targetName: '本周',
              drug: res.result.valueThisWeek.drug ? res.result.valueThisWeek.drug : '/',
              fbg: res.result.valueThisWeek.fbg ? res.result.valueThisWeek.fbg : '/',
              hbA1c: res.result.valueThisWeek.hbA1c ? res.result.valueThisWeek.hbA1c : '/',
              hdl: res.result.valueThisWeek.hdl ? res.result.valueThisWeek.hdl : '/',
              heartRate: res.result.valueThisWeek.heartRate ? res.result.valueThisWeek.heartRate : '/',
              ldl: res.result.valueThisWeek.ldl ? res.result.valueThisWeek.ldl : '/',
              pbg: res.result.valueThisWeek.pbg ? res.result.valueThisWeek.pbg : '/',
              pressureHigh: res.result.valueThisWeek.pressureHigh ? res.result.valueThisWeek.pressureHigh : '/',
              pressureLow: res.result.valueThisWeek.pressureLow ? res.result.valueThisWeek.pressureLow : '/',
              tc: res.result.valueThisWeek.tc ? res.result.valueThisWeek.tc : '/',
              tg: res.result.valueThisWeek.tg ? res.result.valueThisWeek.tg : '/',
              waist: res.result.valueThisWeek.waistLine ? res.result.valueThisWeek.waistLine : '/',
              bmi: res.result.valueThisWeek.bmi ? res.result.valueThisWeek.bmi : '/',
              weight: res.result.valueThisWeek.weight ? res.result.valueThisWeek.weight : '/',
            })
          }
          if (res.result.valueLastWeek) {
            this.data.push({
              targetName: '上周',
              drug: res.result.valueLastWeek.drug ? res.result.valueLastWeek.drug : '/',
              fbg: res.result.valueLastWeek.fbg ? res.result.valueLastWeek.fbg : '/',
              hbA1c: res.result.valueLastWeek.hbA1c ? res.result.valueLastWeek.hbA1c : '/',
              hdl: res.result.valueLastWeek.hdl ? res.result.valueLastWeek.hdl : '/',
              heartRate: res.result.valueLastWeek.heartRate ? res.result.valueLastWeek.heartRate : '/',
              ldl: res.result.valueLastWeek.ldl ? res.result.valueLastWeek.ldl : '/',
              pbg: res.result.valueLastWeek.pbg ? res.result.valueLastWeek.pbg : '/',
              pressureHigh: res.result.valueLastWeek.pressureHigh ? res.result.valueLastWeek.pressureHigh : '/',
              pressureLow: res.result.valueLastWeek.pressureLow ? res.result.valueLastWeek.pressureLow : '/',
              tc: res.result.valueLastWeek.tc ? res.result.valueLastWeek.tc : '/',
              tg: res.result.valueLastWeek.tg ? res.result.valueLastWeek.tg : '/',
              waist: res.result.valueLastWeek.waistLine ? res.result.valueLastWeek.waistLine : '/',
              bmi: res.result.valueLastWeek.bmi ? res.result.valueLastWeek.bmi : '/',
              weight: res.result.valueLastWeek.weight ? res.result.valueLastWeek.weight : '/',
            })
          }
        }
      })
    },
    getSiderInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
      }
      getAction(this.url.getSiderInfo, params).then((res) => {
        if (res.success) {
          this.siderlist = res.result
          this.linedata = res.result.sugarValues
          this.linetime = res.result.sugarTimes
          if (res.result.flupStatusNum == 0) {
            this.date1 = '预约日期'
          }
          if (res.result.flupStatusNum == 1 || res.result.flupStatusNum == 3 || res.result.flupStatusNum == 5) {
            this.date1 = '预约日期'
          }
          if (res.result.flupStatusNum == 2 || res.result.flupStatusNum == 4) {
            this.date1 = '复诊日期'
          }
          console.log(this.linedata)
          this.drawLine()
        }
      })
    },
    drawLine() {
      console.log(this.linedata)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      var option = {
        grid: {
          width: '80%', // 宽度
          height: '55%', // 高度
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: this.linetime,

          boundaryGap: false,

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, //设置这里
            margin: 5,
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,

          minInterval: 3,
          interval: 3,
          // splitNumber: 3,
          axisLine: { show: false },
          axisTick: {
            show: false,
          },
        },
        // visualMap: {
        //   show: false,
        //   dimension: 0,
        //   pieces: [
        //     {
        //       gt: 0,
        //       lte: 4.4,
        //       color: 'green',
        //     },
        //     {
        //       gt: 4.4,
        //       lte: 7.8,
        //       color: 'red',
        //     },
        //     {
        //       gt: 7.8,
        //       color: 'pink',
        //     },
        //   ],
        // },

        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 0,
              lte: 4.4,
              color: '#E88327',
            },
            {
              gt: 4.4,
              lte: 7.8,
              color: '#00D570',
            },
            {
              gt: 7.8,
              color: '#FB0B0A',
            },
          ],
          outOfRange: {
            color: '#999',
          },
        },

        series: [
          {
            name: '血糖曲线',

            outOfRange: {
              color: '#999',
            },
            markArea: {
              silent: true,
            },

            markLine: {
              silent: false, //鼠标悬停事件
              lineStyle: {
                color: '#f06980',
              },
              label: {
                textStyle: {
                  color: '#4d4d4d',
                },
              },
            },
            data: this.linedata,
            type: 'line', // 设置图表类型为 折线图
            smooth: true,
            connectNulls: true,
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
  activated() {
    this.getTargetList()
    this.getBasicInfo()
    this.getSiderInfo()
  },
  // mounted() {
  //   this.getSiderInfo()
  // },
}
</script>

<style scoped>
/* .index_title {
  padding: 0 1rem;
  height: 30px;
  background-color: rgba(70, 152, 247, 0.15);
}
.index_info {
  color: rgb(38, 191, 238);
  padding: 1rem;
}
.index_complicate {
  margin-left: 10px;
  color: gray;
}
.container {
  margin-top: 1.5rem;
  background-color: #fafafb;
}
.info_container {
  padding: 1rem;
} */
.ant-layout.ant-layout-has-sider {
  background-color: #f9f9f9;
}
#components-layout-demo-basic .ant-layout-sider,
#components-layout-demo-basic .ant-layout-content,
#components-layout-demo-basic .ant-layout-footer {
  color: #080808;
  background-color: #f9f9f9;
}
.ant-layout-header {
  background-color: rgba(70, 152, 247, 0.15);

  padding: 0 1rem;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-content {
  min-height: 300px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
.index_info {
  background-color: #f9f9f9;
  padding: 1rem;
}
.index_info1 {
  font-size: 19px;
  color: #2a2a2a;
  margin-left: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.index_info2 {
  font-size: 19px;
  color: #2a2a2a;
}

.index_complicate {
  margin-left: 10px;
  font-size: 16px;
  color: gray;
}

#components-layout-demo-basic .ant-layout-sider img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 30px 50px 10px;
}
.ant-layout-footer {
  padding: 0;
}

.icon {
  display: inline-block;
  width: 60px;
  height: 20px;
  margin-right: 50px;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  background-color: rgb(96, 144, 233);
  color: #fff;
}

.icon1 {
  font-size: 3rem;
  margin-top: 10px;
  margin-left: 10px;
}
.ant-row {
  padding-bottom: 50px;
  padding-left: 30px;
}
.icon_value {
  position: absolute;
  top: 153px;
  left: 58px;
}
.icon_value1 {
  position: absolute;
  top: 210px;
  left: 58px;
}
.text_color {
  color: #bbbbbb;
  margin-right: 20px;
}
.sider_text {
  font-size: 12px;
  color: #000000;
}
.consumption1 {
  position: absolute;
  left: 42px;
  top: 14px;
}
.consumption2 {
  position: absolute;
  left: 42px;
  top: 34px;
}
.index_info1_img {
  width: 73px;
  height: 73px;
  margin: 24px 28px 7px;
}
.index_info1_text {
  margin: 0 51px;
}
.index_info1_text1 {
  margin: 0 44px;
  color: #53cf35;
}
.index_info1_text2 {
  color: #f5222d;
  margin: 0 44px;
}
.layout_content {
  background-color: #ffffff;
  width: 640px;
  height: 516px;
  border-radius: 16px;
  padding: 20px 0;
  margin-right: 20px;
  margin-left: 10px;
}
div{
	margin-bottom: 0px !important;
}
.layout_content > .ant-row {
  padding-bottom: 60px;
  
}
</style>